<template>
	<view class="notice-list">
		<view class="flex flex-ai-center plr-16 bg-color-white pt-12">
			<view @click='$u.route(`/pages/notice/search`)' class="search_box flex flex-ai-center">
				<u-icon name='search' size="26"></u-icon>
				<view class="font-size-26" style="color: #AFAFAF;">搜索内容</view>
			</view>
			<!-- <view @tap="get_bindwx_pusercode" class="gg-dingyue no_text plr-12 ptb-8 br-8">公告订阅</view> -->
		</view>
		<view class="bg-color-white plr-16">
			<u-tabs :scrollable='true' :list="classes" :current='current' @click="changeClass" lineHeight='0'
				:inactiveStyle='inactiveStyle' :activeStyle='activeStyle' lineColor='transparent'>
			</u-tabs>
			<u-line></u-line>
		</view>
		<view>
			<view v-for='item in list' :key='item.id' class="bg-color-item pa-12"  style="border-bottom: 1rpx solid #f5f5f5;"
				@click="$u.route('/pages/notice/noticeDetails',{id:item.id})">
				<!-- <image lazy-load class="br-12" :src="$ossUrl+item.image" mode="" style="width: 100%;" mode="widthFix">
				</image> -->
				<view class="flex-1 pr-12 flex flex-dir-col flex-js-sb">
					<text class="font-size-14 font-color-textPrimary font-w-500"
						style="width: 100%;">{{item.title}}</text>
					<view class="font-size-10 flex flex-js-sb flex-ai-center mt-12">
						<view v-if="colorsNotice[item.affiche_type_id]" class="tag ptb-3 plr-6 br-4 text-overflow" style="max-width: 150rpx;" :style="{backgroundColor:colorsNotice[item.affiche_type_id].bg,color:colorsNotice[item.affiche_type_id].color}">
							{{item.affiche_type}}
						</view>
						<view v-else class="tag ptb-3 plr-6 br-4 text-overflow" style="max-width: 150rpx;" :style="{backgroundColor:colorsNotice[1].bg,color:colorsNotice[1].color}">
							{{item.affiche_type}}
						</view>
						<view class="flex flex-ai-center">
							<!-- <view class="font-color-subtitle font-w-500 mr-10 font-size-11">New</view> -->
							<text class="font-color-999">{{item.createtime|formatDate}}</text>
						</view>
					</view>
				</view>
			</view>
			<w-loading emptyTop="150" :type="loading" emptyType="market"></w-loading>
		</view>
		<w-modal v-model="code_url_show" title="Wxpush推送" :showButton="false" :closeOnClickOverlay='false'>
			<view class="pt-16 font-color-dark font-size-14">
				<image mode="aspectFit" style="width: 100%;" :src="code_url"></image>
			</view>
			<w-button class="mt-32" shape="circle" @click='code_url_show=false'>我知道了</w-button>
		</w-modal>
	</view>
</template>

<script>
	import {
		getNoticeClasses,
		getNoticeList,
		bindwx_pusercode
	} from "@/api/notice/index.js"
	import { colorsNotice } from "../components/colorsNotice.js"
	export default {
		data() {
			return {
				code_url_show: false,
				code_url: '',
				loading: 'none',
				activeStyle: {
					color: '#1F52F8',
					fontSize: '28rpx'
				},
				colorsNotice,
				inactiveStyle: {
					color: '#333333',
					fontSize: '28rpx'
				},
				listData: {},
				classes: [{
					name: "全部",
					id: 0
				}],
				category: 0,
			}
		},
		computed: {
			current() {
				return this.classes.findIndex(v => v.id == this.category)
			},
			search() {
				return this.listData[this.category] ? this.listData[this.category].pager : {}
			},
			list() {
				return this.listData[this.category] ? [...this.listData[this.category].list] : []
			}
		},
		methods: {
			init() {
				if (this.classes.length == 1) {
					this.getClasses();
				}
				this.changeClass({
					index: 0
				})
			},
			//刷新
			refresh() {

				let search = JSON.parse(JSON.stringify(this.search))
				search.page = 1
				this.getList(search);
			},
			//加载更多
			loadMore() {
				let search = JSON.parse(JSON.stringify(this.search))
				search.page++
				this.getList(search);
			},
			//获取分类
			getClasses() {
				getNoticeClasses().then(res => {
					this.classes = this.classes.concat(res.data)
				})
			},
			//切换分类
			changeClass({
				index,
				refresh = false
			}) {
				let id
				if (index > -1) {
					id = this.classes[index].id
				} else {
					id = this.classes[this.classes.length - 1].id
				}

				this.category = id;
				if (!this.listData[id] || refresh) {
					let pager = {
						page: 1,
						category: id,
						list_rows: 25
					}
					let list = []
					this.$set(this.listData, id, {
						pager,
						list
					})
					this.getList(pager)
				} else {
					let {
						pager,
						list
					} = this.listData[id]
					if (!list.length) {
						this.getList(pager)
					} else {
						this.loading = 'none'
					}

				}


			},
			/**
			 * 获取是否绑定微信
			 */
			get_bindwx_pusercode() {
				if (!this.isLogin) {
					uni.$emit('showLogin')
					return;
				}
				if (this.code_url) return this.code_url_show = true
				bindwx_pusercode().then(res => {
					// 处理返回结果...
					this.code_url = res.data.code_url
					this.code_url_show = true
				}).catch(err => {})

			},
			//获取列表
			getList(search) {
				if (this.loading == 'loading') return;
				if (search.page == 1) {
					this.$set(this.listData[search.category], "list", [])
				}
				this.loading = 'loading'
				getNoticeList(search).then(res => {
					this.loading = 'none'

					uni.stopPullDownRefresh()
					if (res.data.data.length) {
						this.$set(this.listData[search.category], 'pager', search);
						this.$set(this.listData[search.category], "list", this.listData[search.category].list
							.concat(res.data.data))
					} else {
						if (search.page == 1) {
							this.loading = 'empty'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		// background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 24rpx;
		// color: #8B8B8B;
	}

	.search_box {
		width: 100%;
		height: 60rpx;
		background: rgba(0,0,0,0.05);;
		border-radius: 32rpx;
		padding: 0 14rpx;
		font-size: 22rpx;
		// border: 4rpx solid #222222;
	}

	.item-box {
		height: 280rpx;
		// background-image: url($IMG_URL + '/static/bg/notice-item.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.gg-dingyue {
		background-color: #D42F2F;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}
</style>